import React, { FC } from "react";
import { Link } from "react-router-dom";
import { LOGIN_PATHNAME } from "../router";
// import { getUserInfor } from "../services/user";
// import { useRequest } from "ahooks";
// 使用自定义hook，获取从全局状态管理中获取用户信息
import useGetUserInfo from "../hooks/useGetUserinfo";
import {UserAddOutlined} from '@ant-design/icons'
import { Button } from "antd";
// import {  removeToken } from "../utils/user-token";
import { useNavigate } from "react-router-dom";
import { UseDispatch, useDispatch } from "react-redux";
import { logOutReducer } from "../store/userReducer";
import { log } from "console";

const UserInfo: FC = () => {
  // 调用接口请求，用户信息
  // const { data } = useRequest(getUserInfor);
  // const {username , nickname} = data || {}
  const {userName : username , nickName : nickname} = useGetUserInfo()
  const dispatch = useDispatch()

  const nav = useNavigate()

  function logout (){
    // removeToken()
    dispatch(logOutReducer())
    nav(LOGIN_PATHNAME)
  }

  const UserInfo = (
    <>
      <span style={{color: '#e8e8e8'}}>
        <UserAddOutlined/>
        {nickname}
      </span>
      <Button type="link" onClick={logout}>退出</Button>
    </>
  )

  const Login =  <Link to={LOGIN_PATHNAME}>登陆</Link>

  // 用户登陆的逻辑 
  return (
    <>
      {username ? UserInfo : Login}
    </>
  );
};

export default UserInfo;
